<template>
	<view class="out">
		<view class="comment">
			<view class="inputView" :class="{ 'input-focus': isFocus, 'uninput-focus': !isFocus }" >
				<input @focus="inputFocus"
					@blur="inputUnFocus"
					type="text"
					placeholder="请输入..." 
					v-model="iptValue" 
					@confirm="publish"
					ref="inputSearch"
				>
				<view v-show="isFocus" class="searchHistory">
					<view class="row" v-for="(item,index) in lists" :key="item.id">
						<view @click="toSearch(item.title)" class="text">{{item.title}}</view>
					</view>
				</view>
			</view>
			<button size="mini" type="primary" 
				:disabled="iptValue.length < 1"
				@click="publish"
				>搜索</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	
	const emit = defineEmits(["publish"])
	
	const iptValue = ref("")
	
	const isFocus = ref(false)
	
	const props = defineProps({
		lists: {
			type: Object
		}
	})
	
	function publish(){
		emit("publish",iptValue.value)
		iptValue.value = ''
	}
	
	function inputFocus(){
		isFocus.value = true
		//
	}
	
	function inputUnFocus(){
		setTimeout(function() {
		    // 延迟执行的代码
			isFocus.value = false
		}, 50);
	}
	
	const inputSearch = ref(null)

	function toSearch(value) {
		iptValue.value = value
	}
</script>

<style lang="scss" scoped>
	.out {
		width: 90vw;
		height: 120rpx;
		margin: 20rpx auto;
		// box-shadow: 0 10px 30rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.comment {
			display: flex;
			// margin-top: 10px;
			// background: rgba(255, 255, 255, 1);
			.inputView {
				position: relative; /* 一般需要设置为相对定位，以便 z-index 生效 */
				z-index: 9999; /* 设置一个足够高的 z-index 值 */

				flex: 4;
				background: rgba(255, 255, 255, 1);
				margin-right: 10rpx;
				// height: 32px;
				border-radius: 8rpx;
				// padding: 0 10px;
				color: #333;
				
				// border: 1px solid #4e6ef2;
				input{
					// background: #f4f4f4;
					margin-right: 10rpx;
					height: 60rpx;
					border-radius: 8rpx;
					padding: 0 20rpx;
					color: #333;
				}
			}
			.searchHistory{
				// width: 100%;
				
				margin-right: 10rpx;
				// height: 100%;
				border-radius: 8rpx;
				padding: 20rpx 20rpx;
				color: #333;
				// border: 1px solid #4e6ef2;
				border-top: 4rpx solid #f4f4f4; /* 添加一条横杠 */
				.row{
					padding: 8rpx 0;
				}
			}
		}
		button {
			flex: 1;
			height: 62rpx;
			// background-color: #4e6ef2;
		}
		
	}
	
	.input-focus{
		border: 3rpx solid #4e6ef2;
	}
	.uninput-focus{
		border: 3rpx solid #c4c7ce;
	}
</style>